<template>
  <li @click.stop="componentCheckInfo(listItemData)">
    <div class="desc_box">
      <div class="item_title overdue">
        <span class="title-label">
          <template v-if="!listItemData.checkType">
            部门
          </template>
          <template v-if="listItemData.checkType">
            {{ listItemData.checkType === 2 ? "设备" : "部件" }}
          </template>
        </span>
        <span class="title-text">
          <template v-if="!listItemData.checkType">
            {{ listItemData.departmentName }}
          </template>
          <template v-if="listItemData.checkType">
            {{
              listItemData.checkType === 2
                ? listItemData.deviceName || ""
                : `${listItemData.deviceName} - ${listItemData.componentName}` ||
                  ""
            }}
          </template>
        </span>
        <template v-if="!listItemData.checkType">
          <span class="title-tip" v-if="viewType == 3">
            逾期未处理
            {{
              listItemData.deviceOverdueNum + listItemData.componentOverdueNum
            }}
          </span>
          <span
            class="title-tip"
            style="text-align: right;"
            v-if="viewType != 3"
          >
            进度
            {{
              listItemData.deviceRecordDoneNum +
                listItemData.componentRecordDoneNum
            }}
            /
            {{
              listItemData.deviceRecordTotalNum +
                listItemData.componentRecordTotalNum
            }}
          </span>
        </template>
        <template v-else-if="listItemData.checkType">
          <span
            class="title-tip"
            :class="'status' + listItemData.status"
            style="text-align: right;"
            v-if="viewType != 3"
          >
            {{ listItemData.statusName }}
          </span>
        </template>
      </div>
      <template v-if="!listItemData.checkType">
        <div class="item-body" v-if="viewType == 3">
          <span>设备逾期：{{ listItemData.deviceOverdueNum }}</span>
          <span>部件逾期：{{ listItemData.componentOverdueNum }}</span>
          <span class="item-show" @click.stop="eventUndoListShow">
            <template v-if="!show || !showOverdue">
              <span>展开</span>
            </template>
            <template v-else>
              <span>收起</span>
            </template>
          </span>
        </div>
        <div class="item-body" v-else-if="viewType != 3">
          <span>
            设备：{{ listItemData.deviceRecordDoneNum }} /
            {{ listItemData.deviceRecordTotalNum }}
          </span>
          <span>
            部件：{{ listItemData.componentRecordDoneNum }} /
            {{ listItemData.componentRecordTotalNum }}
          </span>
          <span class="item-show" @click.stop="eventUndoListShow">
            <template v-if="!show || !showOverdue">
              <span>展开</span>
            </template>
            <template v-else>
              <span>收起</span>
            </template>
          </span>
        </div>
      </template>
      <template v-if="listItemData.checkType">
        <div class="item-body item-body-other">
          <template v-if="listItemData.status == 7">
            负责人：{{ listItemData.operatorName }}
          </template>
          <template v-else-if="listItemData.status == 9">
            处理人：{{ listItemData.overdueDisposeUserName }}
          </template>
          <template v-else>
            负责人： {{ listItemData.leaderList.map(e => e.name).join(" , ") }}
          </template>
        </div>
        <template v-if="viewType == 3">
          <div class="item-bottom item-body-other">
            <span>
              逾期时间：
              <span style="color:#456de6">
                {{ listItemData.endTime | formatDate("YYYY-MM-DD HH:mm") }}
              </span>
              <span class="child-body-state" v-if="listItemData.shift">
                {{ listItemData.shift }}
              </span>
            </span>
            <div
              class="handle-btn"
              v-if="privilege('wechat_operaionManage', 'wechat_operaionManage:overdue_list_mange')"
            >
              <span
                class="btn"
                @click.stop="eventOverdueHandle([listItemData], 0)"
              >
                处理
              </span>
            </div>
          </div>
        </template>
        <template v-if="viewType != 3">
          <div class="item-bottom">
            <span v-if="listItemData.status == 4">
              时间：
              {{ listItemData.startTime | formaDateH }}点&nbsp;至&nbsp;
              {{ listItemData.endTime | formaDateH }}点
            </span>
            <span v-else-if="listItemData.status == 3">
              剩余时间： {{ listItemData.surplusTime }}
            </span>
            <span v-else-if="listItemData.status == 5">
              逾期时间： {{ listItemData.surplusTime }}
            </span>
            <span v-else-if="listItemData.status == 7">
              提交时间：
              {{ listItemData.checkSubmitTime | formaDateHms }}
            </span>
            <span v-else-if="listItemData.status == 9">
              处理时间：
              {{ listItemData.overdueDisposeTime | formaDateHms }}
            </span>
          </div>
        </template>
      </template>
      <template v-if="show && showOverdue">
        <div
          class="item-chlid"
          v-for="(item, index) in undoList"
          :key="item.id + index"
          @click.stop="eventChlid(item)"
        >
          <div class="child-title">
            <span class="child-label">
              {{ item.checkType == 2 ? "设备" : "部件" }}
            </span>

            <span class="child-ellipsis">
              {{
                item.checkType === 2
                  ? item.deviceName || ""
                  : `${item.deviceName} - ${item.componentName}` || ""
              }}
            </span>

            <span
              class="child-tip"
              :class="'status' + item.status"
              style="text-align: right;"
              v-if="viewType != 3"
            >
              {{ item.statusName }}
            </span>
          </div>
          <div class="child-body ellipsis">
            <template v-if="item.status == 7">
              负责人：{{ item.operatorName }}
            </template>
            <template v-else-if="item.status == 9">
              处理人：{{ item.overdueDisposeUserName }}
            </template>
            <template v-else>
              负责人： {{ item.leaderList.map(e => e.name).join(" , ") }}
            </template>
          </div>
          <div class="child-body handle" v-if="viewType == 3">
            <span>
              逾期时间：
              <span>
                {{ item.endTime | formatDate("YYYY-MM-DD HH:mm") }}
              </span>
              <span class="child-body-state" v-if="item.shift">
                {{ item.shift }}
              </span>
            </span>
            <div
              class="handle-btn"
              v-if="privilege('wechat_operaionManage', 'wechat_operaionManage:overdue_list_mange')"
            >
              <span class="btn" @click.stop="eventOverdueHandle([item], 0)">
                处理
              </span>
            </div>
          </div>
          <div class="child-body handle" v-if="viewType != 3">
            <span v-if="item.status == 4">
              时间：
              {{ item.startTime | formaDateH }}点&nbsp;至&nbsp;
              {{ item.endTime | formaDateH }}点
            </span>
            <span v-else-if="item.status == 3">
              剩余时间： {{ item.surplusTime }}
            </span>
            <span v-else-if="item.status == 5">
              逾期时间： {{ item.surplusTime }}
            </span>
            <span v-else-if="item.status == 7">
              提交时间：
              {{ item.checkSubmitTime | formaDateHms }}
            </span>
            <span v-else-if="item.status == 9">
              处理时间：
              {{ item.overdueDisposeTime | formaDateHms }}
            </span>
          </div>
        </div>
      </template>
      <div
        class="newpage_work_more"
        v-if="showMore && show && showOverdue"
        @click.stop="getMore"
      >
        查看更多
      </div>
    </div>
  </li>
</template>

<script>
import { Privilege } from "@/mixin";
export default {
  props: {
    listItemData: {
      type: Object,
      default: () => {}
    },
    firstIndex: Number,
    secondIndex: Number,
    showOverdue: Boolean,
    isLastLevel: Boolean,
    showMore: Boolean,
    viewType: Number,
    departmentName: String
  },
  data() {
    return {
      show: false
      // undoList:[],
    };
  },
  mixins: [Privilege],
  computed: {
    undoList() {
      if (this.listItemData.undoList && this.listItemData.undoList.length) {
        return this.listItemData.undoList;
      } else {
        return [];
      }
    }
  },
  methods: {
    // 设备下所有部件点巡检记录
    componentCheckInfo: function(config) {
      if (this.isLastLevel) {
        this.eventChlid(config);
      } else {
        this.$emit("eventOpenNext");
      }
    },
    eventUndoListShow() {
      if (!this.showOverdue || !this.show) {
        this.show = true;
      } else {
        this.show = false;
      }
      this.$emit("eventChangeOverdueIndex");
    },
    getMore() {
      this.$emit("eventPageNext");
    },
    eventChlid(item) {
      if (this.viewType != 3) {
        this.$emit("eventChlid");
        this.$router.push({
          name: `deviceCheckOverViewPage`,
          query: {
            deviceId: item.deviceId,
            deviceName: item.deviceName,
            deviceTypeName: item.deviceTypeName,
            viewType: this.viewType,
            departmentId: item.departmentId,
            departmentName:
              this.listItemData.departmentName || this.departmentName,
            type: "设备"
          }
        });
      }
    },
    eventOverdueHandle(arr, tag) {
      this.$emit("eventOverdueHandle", arr, tag);
    }
  }
};
</script>

<style lang="less" scoped>
li {
  &:not(:first-child) {
    margin-top: 12px;
  }

  background: rgba(41, 42, 77, 1);
  border-radius: 4px;

  &.active {
    background: rgba(56, 58, 105, 1);
  }

  .desc_box {
    padding: 8px;
    height: auto;
    min-height: 80px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    .ellipsis {
      display: inherit !important;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .item_title {
      font-size: 17px;
      color: #fff;
      // overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &.overdue {
        justify-content: flex-start;
      }
      .tag {
        color: #4266d6;
        float: right;
        font-size: 15px;

        &.yollow {
          color: #dd9710;
        }
        &.redy {
          color: #f56c6c;
        }
        &.green {
          color: #67c23a;
        }
      }
      .title-label {
        margin-left: -8px;
        border-radius: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        font-size: 14px;
        padding: 0 12px 1px 8px;
        background-color: #456de6;
        margin-right: 8px;
        flex: none;
      }
      .title-text {
        margin-right: 6px;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .title-tip {
        // width: 100%;
        font-size: 14px;
        flex: none;
        // color: #dd9710;
        &.status {
          color: #456de6;
        }
        &.status1,
        &.status4 {
          color: #4fa8e7;
        }
        &.status3 {
          color: #456de6;
        }
        &.status5 {
          color: #dd9710;
        }
        &.status9,
        &.status7 {
          color: #dd9710;
        }
        // &.green {
        //   color: #67c23a;
        // }
        // &.gray {
        //   color: #999;
        // }
      }
    }
    .item-body {
      color: #456de6;
      font-size: 16px;
      padding: 12px 0;
      display: flex;
      justify-content: space-between;
      > span {
        flex: 1;
      }
      .item-show {
        color: #fff;
        font-size: 14px;
        width: 52px;
        padding: 1px 0;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 80px;
        border: 1px solid #456de6;
      }
    }
    .item-body-other {
      color: rgba(255, 255, 255, 0.6);
    }
    .item-bottom {
      padding-top: 6px;
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .child-body-state {
        margin-left: 8px;
        padding: 0 2px 1px;
        color: #456de6;
        border: 1px solid #456de6;
        border-radius: 2px;
      }
      .handle-btn {
        margin-left: 8px;
        flex: none;
      }
      .btn {
        color: #fff;
        font-size: 14px;
        background-color: #456de6;
        padding: 2px 11px 3px;
        border-radius: 12px;
      }
    }
    .item-chlid {
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      padding-top: 15px;
      padding-bottom: 6px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.6);
      .child-title {
        color: #fff;
        // overflow: hidden;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: keep-all;
        display: flex;
        align-items: center;
        // justify-content: space-between;

        .child-label {
          font-size: 14px;
          margin-right: 8px;
          padding: 0 6px 1px;
          color: #fff;
          border: 1px solid #456de6;
          border-radius: 2px;
        }
        .child-ellipsis {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .child-tip {
          width: 30%;
          margin-right: 8px;
          font-size: 14px;
          &.status {
            color: #dd9710;
          }
          &.status {
            color: #456de6;
          }
          &.status1,
          &.status4 {
            color: #4fa8e7;
          }
          &.status3 {
            color: #456de6;
          }
          &.status5 {
            color: #dd9710;
          }
          &.status9,
          &.status7 {
            color: #dd9710;
          }
        }
      }

      .child-body {
        font-size: 14px;
        margin: 8px 0;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        .child-body-state {
          margin-left: 8px;
          padding: 0 2px 1px;
          color: #456de6;
          border: 1px solid #456de6;
          border-radius: 2px;
        }
        &.handle {
          justify-content: space-between;
          color: #fff;
        }
      }
      .handle-btn {
        margin-left: 8px;
        flex: none;
      }
      .btn {
        color: #fff;
        font-size: 14px;
        background-color: #456de6;
        padding: 2px 11px 3px;
        border-radius: 12px;
      }
    }
    .their {
      font-size: 14px;
      color: #fff;
    }
    .more  {
      display: -webkit-box !important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .time {
      font-size: 14px;
      color: rgba(69, 109, 230, 1);
    }
    .newpage_work_more {
      height: 40px;
      font-size: 12px;
      line-height: 40px;
      text-align: center;
      color: #456de6;
    }
  }
}
</style>
